<template>
  <section class="cards">
    <article class="Card card--1" v-for="item in shows" :key="item.showId">
      <div class="card__info-hover">
        <svg class="card__like" viewBox="0 0 24 24"></svg>
        <div class="card__clock-info">
          <svg class="card__clock" viewBox="0 0 24 24"></svg>
        </div>
      </div>
      <div
        class="card__img"
        :style="{ 'background-image': `url(${map.get(item.showId)})` }"
      ></div>
      <a href="#" class="card_link">
        <div
          class="card__img--hover"
          :style="{ 'background-image': `url(${map.get(item.showId)})` }"
        ></div>
      </a>
      <div class="card__info">
        <span class="card__category">{{ item.showTitle }}</span>
        <h3 class="card__title">{{ item.showDescription }}</h3>
        <span class="card__by"
          >by
          <a href="#" class="card__author" title="author">{{
            item.actor
          }}</a></span
        >
      </div>
    </article>
  </section>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  getCurrentInstance,
  onMounted,
  onBeforeMount,
} from "vue";
import { HttpManager } from "@/api";
import { resultProps } from "element-plus";
import { it } from "node:test";

export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance();
    const activities = ref([]);
    const shows = ref([]);
    const map = new Map();

    //获取活动信息
    async function getActivies() {
      const result = (await HttpManager.getAllApplication()) as ResponseBody;
      if (result.success) {
        for (let i = 0; i < result.data.length; i++) {
          if (result.data[i].showStatus == "1")
            shows.value.push(result.data[i]);
          map.set(
            result.data[i].showId,
            HttpManager.attachImageUrl(result.data[i].showPicture)
          );
          console.log(HttpManager.attachImageUrl(result.data[i].showPicture));
        }
      }
      console.log(shows.value);
    }

    onBeforeMount(() => {
      getActivies();
    });

    // onMounted(() => {
    //   getActivies();
    // });
    return {
      map,
      shows,
      activities,
      proxy,
      HttpManager,
      getActivies,
    };
  },
});
</script>

<style scoped>
@import "@/assets/css/card.scss";
</style>
